<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ss {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="ss">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
        <p>19</p>
        <p>20</p>
        <p>21</p>
        <p>22</p>
        <p>23</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <p>24</p>
        <button>dw</button>
    </div>
    <script>
        let ss = document.querySelector('.ss');
        let btn = document.querySelector('button')
        let step = 20;
        let html = document.documentElement;
        console.log(html);
        btn.addEventListener('click', function() {

            let timer = setInterval(function() {
                html.scrollTop -= step;
                console.log(html.scrollTop);
                if (html.scrollTop == 0) {
                    clearInterval(timer);
                }
            }, 16)
        })
    </script>
</body>

</html>